
import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class UserBindPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _UserBindPage();
  }
}

class _UserBindPage extends State<UserBindPage> {
  final UserBindLogic logic = Get.put(UserBindLogic());
  final UserBindState state = Get.find<UserBindLogic>().state;

  Widget build(BuildContext context) {
    return Scaffold(
      body: GetBuilder<UserBindLogic>(
        builder: (logic) {
          return ListView(
            padding: EdgeInsets.zero,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                child: Column(
                  //mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // 关闭
                          GestureDetector(
                            onTap: () {
                              Get.back();
                            },
                            child: Padding(
                              padding: EdgeInsets.only(top: setWidth(80)),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  Image.asset(
                                    'assets/images/close_images.png',
                                    width: setWidth(50),
                                    height: setWidth(50),
                                    fit: BoxFit.fill,
                                  ),
                                ],
                              ),
                            ),
                          ),
                          // 绑定账号
                          Padding(
                              padding: EdgeInsets.only(
                                top: setWidth(150),
                                bottom: setWidth(100),
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('请输入想要绑定的账号',
                                      style: TextStyle(
                                          fontSize: 20,
                                          fontWeight: FontWeight.w800)),
                                  Padding(
                                    padding: EdgeInsets.only(top: 10),
                                    child: Text('输入手机号、验证码进行验证'),
                                  )
                                ],
                              )),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              TextField(
                                controller: state.phoneTextController,
                                focusNode: state.phoneFocusNode,
                                maxLines: 1,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 16,
                                ),
                                onChanged: (value) {
                                  logic.textControllerClick();
                                },
                                keyboardType: TextInputType.phone,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.symmetric(
                                      vertical: setWidth(36)),
                                  hintText: '请输入手机号',
                                  prefixIcon: Container(
                                    width: setWidth(130),
                                    height: setWidth(40),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          '+86',
                                          style: TextStyle(
                                            color: Color(0xff222222),
                                            fontSize: 14,
                                          ),
                                        ),
                                        Padding(
                                          padding: EdgeInsets.only(
                                              right: setWidth(40)),
                                          child: Container(
                                            width: setWidth(2),
                                            height: setWidth(32),
                                            color: Color(0xffeeeeee),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  hintStyle: TextStyle(
                                    color: Color(0xffD2D2D2),
                                    fontSize: 16,
                                  ),
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide:
                                        BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                  focusedBorder: UnderlineInputBorder(
                                    borderSide:
                                        BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                ),
                              ),
                              TextField(
                                controller: state.passwordTextController,
                                focusNode: state.passwordFocusNode,
                                maxLines: 1,
                                style: TextStyle(
                                  color: Color(0xff222222),
                                  fontSize: 16,
                                ),
                                onChanged: (value) {
                                  logic.textControllerClick();
                                },
                                keyboardType: TextInputType.phone,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.symmetric(
                                      vertical: setWidth(36)),
                                  hintText: '请输入验证码',
                                  suffixIcon: Container(
                                    width: setWidth(180),
                                    alignment: Alignment.centerLeft,
                                    child: GestureDetector(
                                      onTap: () {
                                        print(
                                            '++++++++++++++++++ 获取验证码点击事件 ++++++++++++++++++');
                                        if (!RegexUtil.isMobileSimple(
                                            state.phoneTextController.text)) {
                                          toast("手机号格式错误");
                                          return;
                                        }
                                        if (state.phoneTextController.text
                                                .length >
                                            0) {
                                          if (logic.state.seconds > 0 &&
                                              logic.state.seconds < 60) {
                                            return;
                                          }
                                          logic.state.seconds = 59;
                                          logic.sendSms();
                                        } else {
                                          toast('请输入手机号');
                                        }
                                      },
                                      child: Container(
                                        width: setWidth(180),
                                        height: setWidth(60),
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(
                                              setWidth(10)),
                                          border: Border.all(
                                            width: setWidth(1),
                                            color: Color(0xffe1e1e1),
                                          ),
                                        ),
                                        alignment: Alignment.center,
                                        child: Text(
                                          state.verifyStr,
                                          style: TextStyle(
                                            color: Color(0xff717171),
                                            fontSize: 13,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  hintStyle: TextStyle(
                                    color: Color(0xffD2D2D2),
                                    fontSize: 16,
                                  ),
                                  enabledBorder: UnderlineInputBorder(
                                    borderSide:
                                        BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                  focusedBorder: UnderlineInputBorder(
                                    borderSide:
                                        BorderSide(color: Color(0xffEEEEEE)),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          // 下一步
                          Padding(
                            padding: EdgeInsets.only(
                              top: setWidth(100),
                              bottom: setWidth(40),
                            ),
                            child: GestureDetector(
                              onTap: () {
                                if (state.loginBool) {
                                  logic.onSubmit();
                                }
                              },
                              child: Container(
                                height: setWidth(90),
                                decoration: BoxDecoration(
                                  color: Color(0xffEA5504).withOpacity(1.0),
                                  borderRadius:
                                      BorderRadius.circular(setWidth(45)),
                                ),
                                alignment: Alignment.center,
                                child: Text(
                                  '下一步',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}